<template>
  <div>

    <!-- Unnamed (矩形) -->
    <div id="u2598" class="ax_default box_1">
      <div id="u2598_div" class=""></div>
      <div id="u2598_text" class="text ">
        <p><span>个人信息</span></p>
      </div>
    </div>

    <!-- Unnamed (保存关闭) -->

    <el-form label-width="100px" class="demo-ruleForm">

      <!-- Unnamed (组合) -->
      <div id="u2601" class="ax_default" data-left="470" data-top="752" data-width="75" data-height="32"
           style="cursor: pointer;">

        <!-- Unnamed (矩形) -->
        <div id="u2602" class="ax_default primary_button">
          <p><span><el-button type="primary" @click="onSubmit">保存</el-button></span></p>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u2603" class="ax_default icon">
          <img id="u2603_img" class="img " src="@/components/css/images/home/u2603.svg">
          <div id="u2603_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (组合) -->
      <div id="u2604" class="ax_default" data-left="555" data-top="752" data-width="75" data-height="32"
           style="cursor: pointer;">

        <!-- Unnamed (矩形) -->
        <div id="u2605" class="ax_default primary_button">
          <p>
            <el-button @click="onCancel">取消</el-button>
          </p>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u2606" class="ax_default _形状1">
          <img id="u2606_img" class="img " src="@/components/css/images/home/u2606.svg">
          <div id="u2606_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>
      <div id="u2600" style="display:none; visibility:hidden;"></div>

      <!-- Unnamed (形状) -->
      <div id="u1787" class="ax_default ellipse">
        <div id="u1787_text" class="text ">
          <p><span>点击编辑</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2607" class="ax_default label">
        <div id="u2607_div" class=""></div>
        <div id="u2607_text" class="text ">
          <p><span>用户头像：</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2608" class="ax_default label">
        <div id="u2608_div" class=""></div>
        <div id="u2608_text" class="text ">
          <p><span>用户 ID：</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u2609" class="ax_default _图片_">
        <img id="u2609_img" class="img " src="@/components/css/images/home/u2609.svg">
        <div id="u2609_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2610" class="ax_default label">
        <div id="u2610_div" class=""></div>
        <div id="u2610_text" class="text ">
          <p><span>性别：</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2611" class="ax_default label">
        <div id="u2611_div" class=""></div>
        <div id="u2611_text" class="text ">
          <p><span>邮箱：</span></p>
        </div>
      </div>


      <!-- Unnamed (文本框) -->
      <div id="u2612" class="ax_default text_field">
        <div id="u2612_div" class=""></div>
        <el-input id="u2612_input" v-model="email" class="u2612_input" :placeholder="email"></el-input>
      </div>

      <div id="u2611_Phone" class="ax_default label">
        <div id="u2611_div_Phone" class=""></div>
        <div id="u2611_text_Phone" class="text ">
          <p><span>电话：</span></p>
        </div>
      </div>

      <div id="u2612_Phone" class="ax_default text_field">
        <div id="u2612_div_Phone" class=""></div>
        <el-input id="u2612_input_Phone" v-model="phoneNumber" class="u2612_input"
                  :placeholder="phoneNumber"></el-input>
      </div>

      <div id="u2614" class="ax_default radio_button selected" selectiongroup="性别">
        <el-radio-group v-model="gender" direction="horizontal">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
          <el-radio :label="-1">其他</el-radio>
        </el-radio-group>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2643" class="ax_default label">
        <div id="u2643_div" class=""></div>
        <div id="u2643_text" class="text ">
          <p><span style="color:#D9001B;">* </span><span>昵称：</span></p>
        </div>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u2644" class="ax_default text_field">
        <div id="u2644_div" class=""></div>
        <el-input id="u2644_input" v-model="nickName" class="u2644_input" :placeholder="nickName"></el-input>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2645" class="ax_default label">
        <div id="u2645_div" class=""></div>
        <div id="u2645_text" class="text ">
          <p><span>{{ accountId }}</span></p>
        </div>
      </div>

    </el-form>

    <br/><br/><br/><br/>
    <br/><br/><br/><br/>
    <br/><br/><br/><br/>

  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "PIMView",
  data() {
    return {
      accountId: "",
      accountName: '',
      phoneNumber: '',
      dialogVisible: false,
      loginDate: '',
      email: '',
      nickName: '',
      createTime: '',
      gender: '',
    };
  },
  methods: {
    getAccountByaccountId() {
      this.accountId = sessionStorage.getItem("accountId");
      this.$axios.get(`/account/${this.accountId}`)
          .then(response => {
            if (response.data.code === 200) {
              let data = response.data.data;
              this.accountName = data.accountName;
              this.phoneNumber = data.phoneNumber;
              this.email = data.email;
              this.nickName = data.nickName;
              this.createTime = data.createTime;
              this.loginDate = data.loginDate;
              this.gender = data.gender;
              this.accountId = data.accountId;
            } else {
              console.log(response.data.msg);
            }
          })
          .catch(error => {
            console.error('获取账户信息时出错:', error);
          });
    },
    onSubmit() {
      // 检查电话号码是否小于或等于11位
      if (this.phoneNumber && this.phoneNumber.length > 11) {
        // 如果电话号码长度超过11位，则显示错误消息
        Message({
          type: "error",
          message: "电话号码长度不能超过11位。",
          duration: 1000
        });
        return; // 停止执行后续代码
      }

      // 构建要提交的数据对象
      const formData = {
        accountId: this.accountId,
        accountName: this.accountName,
        phoneNumber: this.phoneNumber,
        email: this.email,
        nickName: this.nickName,
        gender: this.gender
      };

      // 发送保存请求
      this.$axios.post('/account/updateAccount', formData)
          .then(response => {
            if (response.data.code === 200) {
              Message({
                type: "success",
                message: response.data.msg,
                duration: 1000
              })
              this.$router.push('/center');
            } else {
              Message({
                type: "error",
                message: response.data.msg,
                duration: 1000
              })
            }
          })
          .catch(error => {
            Message({
              type: "error",
              message: error.data.msg,
              duration: 1000
            })
          });
    },

    onCancel() {
      // 可以清除输入框的值或执行其他与取消相关的操作
      this.accountName = '';
      this.phoneNumber = '';
      this.email = '';
      this.nickName = '';
      this.gender = '';
      console.log('取消操作，已清除输入数据');
    }
  },
  created() {
    this.getAccountByaccountId();
  }
}
</script>

<style scoped>

</style>